<!DOCTYPE html>
<html><head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <link rel="canonical" href="/unity-2d-beginner/map/">

    <title>
        
        Map | h-book
        
    </title>

    
    <link href="/css/fontawesome.min.css" rel="stylesheet">

    
    <link rel="stylesheet" href="/css/ace.min.css">

    

    

</head>
<body><nav class="navbar navbar-expand-lg navbar-dark bg-primary shadow sticky-top" id="navbarMain">
    <div class="container">
        <div>
            <a class="navbar-brand" href="/">
                
                h-book
            </a>
        </div>
    </div>
</nav>
<div class="container-fluid">
            <div class="row">

                <div class="docs-sidenav order-0 col-12 col-md-3 col-lg-2 col-xl-2 position-sticky border-right"><nav class="navbar navbar-expand-md navbar-light pl-0">
    <button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#sidenav-left-collapse" aria-controls="sidenav-left-collapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

     <div class="collapse navbar-collapse align-items-start flex-column" id="sidenav-left-collapse">
            <form class="form-inline my-2 my-lg-0 searchbox">
                <input class="form-control mr-sm-2 w-100" data-search-input id="search-by" type="text" placeholder="Search">
            </form>

        

         <ul class="navbar-nav flex-column pt-3">
    <li data-nav-id="/hugo/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/hugo/"><h6>Hugo</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/hugo/init/" class="nav-item my-1">
                
                
                  <a href="/hugo/init/" class="nav-link p-0">
                    init
                  </a>
                
        </li>
        <li data-nav-id="/hugo/add-page/" class="nav-item my-1">
                
                
                  <a href="/hugo/add-page/" class="nav-link p-0">
                    add-page
                  </a>
                
        </li>
        <li data-nav-id="/hugo/edit-skill/" class="nav-item my-1">
                
                
                  <a href="/hugo/edit-skill/" class="nav-link p-0">
                    edit-skill
                  </a>
                
        </li>
        <li data-nav-id="/hugo/publish/" class="nav-item my-1">
                
                
                  <a href="/hugo/publish/" class="nav-link p-0">
                    publish
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/android/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/android/"><h6>Android</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/android/install/" class="nav-item my-1">
                
                
                  <a href="/android/install/" class="nav-link p-0">
                    install
                  </a>
                
        </li>
        <li data-nav-id="/android/create-project/" class="nav-item my-1">
                
                
                  <a href="/android/create-project/" class="nav-link p-0">
                    create project
                  </a>
                
        </li>
        <li data-nav-id="/android/import-material/" class="nav-item my-1">
                
                
                  <a href="/android/import-material/" class="nav-link p-0">
                    import material
                  </a>
                
        </li>
        <li data-nav-id="/android/start-page/" class="nav-item my-1">
                
                
                  <a href="/android/start-page/" class="nav-link p-0">
                    startpage
                  </a>
                
        </li>
        <li data-nav-id="/android/i18n/" class="nav-item my-1">
                
                
                  <a href="/android/i18n/" class="nav-link p-0">
                    i18n
                  </a>
                
        </li>
        <li data-nav-id="/android/nav-flat-page/" class="nav-item my-1">
                
                
                  <a href="/android/nav-flat-page/" class="nav-link p-0">
                    nav flat page
                  </a>
                
        </li>
        <li data-nav-id="/android/activity/" class="nav-item my-1">
                
                
                  <a href="/android/activity/" class="nav-link p-0">
                    Activity
                  </a>
                
        </li>
        <li data-nav-id="/android/db/" class="nav-item my-1">
                
                
                  <a href="/android/db/" class="nav-link p-0">
                    DB
                  </a>
                
        </li>
        <li data-nav-id="/android/dialog/" class="nav-item my-1">
                
                
                  <a href="/android/dialog/" class="nav-link p-0">
                    Dialog
                  </a>
                
        </li>
        <li data-nav-id="/android/fragment/" class="nav-item my-1">
                
                
                  <a href="/android/fragment/" class="nav-link p-0">
                    Fragment
                  </a>
                
        </li>
        <li data-nav-id="/android/jetpack/" class="nav-item my-1">
                
                
                  <a href="/android/jetpack/" class="nav-link p-0">
                    Jetpack
                  </a>
                
        </li>
        <li data-nav-id="/android/material/" class="nav-item my-1">
                
                
                  <a href="/android/material/" class="nav-link p-0">
                    Material
                  </a>
                
        </li>
        <li data-nav-id="/android/storage/" class="nav-item my-1">
                
                
                  <a href="/android/storage/" class="nav-link p-0">
                    Storage
                  </a>
                
        </li>
        <li data-nav-id="/android/%E5%9B%BE%E6%A0%87/" class="nav-item my-1">
                
                
                  <a href="/android/%E5%9B%BE%E6%A0%87/" class="nav-link p-0">
                    图标
                  </a>
                
        </li>
        <li data-nav-id="/android/store/" class="nav-item my-1">
                
                
                  <a href="/android/store/" class="nav-link p-0">
                    Store
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/blender/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/blender/"><h6>Blender</h6></a>
        
    </li>
    <li data-nav-id="/bootstrap/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/bootstrap/"><h6>BootStrap</h6></a>
        
    </li>
    <li data-nav-id="/centos7/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/centos7/"><h6>Centos7</h6></a>
        
    </li>
    <li data-nav-id="/dlna/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/dlna/"><h6>DLNA</h6></a>
        
    </li>
    <li data-nav-id="/docker/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/docker/"><h6>Docker</h6></a>
        
    </li>
    <li data-nav-id="/dubbo/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/dubbo/"><h6>Dubbo</h6></a>
        
    </li>
    <li data-nav-id="/ffmpeg/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/ffmpeg/"><h6>FFmpeg</h6></a>
        
    </li>
    <li data-nav-id="/git/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/git/"><h6>Git</h6></a>
        
    </li>
    <li data-nav-id="/gitbook/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/gitbook/"><h6>Gitbook</h6></a>
        
    </li>
    <li data-nav-id="/gitlab/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/gitlab/"><h6>Gitlab</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/gitlab/runner/" class="nav-item my-1">
                
                
                  <a href="/gitlab/runner/" class="nav-link p-0">
                    Runner
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/gradle/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/gradle/"><h6>Gradle</h6></a>
        
    </li>
    <li data-nav-id="/java/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/java/"><h6>Java</h6></a>
        
    </li>
    <li data-nav-id="/jenkins/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/jenkins/"><h6>Jenkins</h6></a>
        
    </li>
    <li data-nav-id="/kubernetes/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/kubernetes/"><h6>Kubernetes</h6></a>
        
    </li>
    <li data-nav-id="/mybatis/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/mybatis/"><h6>Mybatis</h6></a>
        
    </li>
    <li data-nav-id="/mybatis-plus/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/mybatis-plus/"><h6>Mybatis Plus</h6></a>
        
    </li>
    <li data-nav-id="/mysql/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/mysql/"><h6>MySQL</h6></a>
        
    </li>
    <li data-nav-id="/nodejs/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/nodejs/"><h6>Node.js</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/nodejs/npm/" class="nav-item my-1">
                
                
                  <a href="/nodejs/npm/" class="nav-link p-0">
                    NPM
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/postgresql/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/postgresql/"><h6>PostgreSQL</h6></a>
        
    </li>
    <li data-nav-id="/redis/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/redis/"><h6>Redis</h6></a>
        
    </li>
    <li data-nav-id="/samba/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/samba/"><h6>Samba</h6></a>
        
    </li>
    <li data-nav-id="/sql/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/sql/"><h6>SQL</h6></a>
        
    </li>
    <li data-nav-id="/ue5/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/ue5/"><h6>UE5</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/ue5/install/" class="nav-item my-1">
                
                
                  <a href="/ue5/install/" class="nav-link p-0">
                    install
                  </a>
                
        </li>
        <li data-nav-id="/ue5/uninstall/" class="nav-item my-1">
                
                
                  <a href="/ue5/uninstall/" class="nav-link p-0">
                    uninstall
                  </a>
                
        </li>
        <li data-nav-id="/ue5/qa/" class="nav-item my-1">
                
                
                  <a href="/ue5/qa/" class="nav-link p-0">
                    Q&amp;A
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity/"><h6>Unity</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity/install/" class="nav-item my-1">
                
                
                  <a href="/unity/install/" class="nav-link p-0">
                    install
                  </a>
                
        </li>
        <li data-nav-id="/unity/scene/" class="nav-item my-1">
                
                
                  <a href="/unity/scene/" class="nav-link p-0">
                    scene
                  </a>
                
        </li>
        <li data-nav-id="/unity/inspector/" class="nav-item my-1">
                
                
                  <a href="/unity/inspector/" class="nav-link p-0">
                    inspector
                  </a>
                
        </li>
        <li data-nav-id="/unity/assets/" class="nav-item my-1">
                
                
                  <a href="/unity/assets/" class="nav-link p-0">
                    assets
                  </a>
                
        </li>
        <li data-nav-id="/unity/audio-source/" class="nav-item my-1">
                
                
                  <a href="/unity/audio-source/" class="nav-link p-0">
                    audio source
                  </a>
                
        </li>
        <li data-nav-id="/unity/camera/" class="nav-item my-1">
                
                
                  <a href="/unity/camera/" class="nav-link p-0">
                    camera
                  </a>
                
        </li>
        <li data-nav-id="/unity/script/" class="nav-item my-1">
                
                
                  <a href="/unity/script/" class="nav-link p-0">
                    script
                  </a>
                
        </li>
        <li data-nav-id="/unity/prefabs/" class="nav-item my-1">
                
                
                  <a href="/unity/prefabs/" class="nav-link p-0">
                    prefabs
                  </a>
                
        </li>
        <li data-nav-id="/unity/physics/" class="nav-item my-1">
                
                
                  <a href="/unity/physics/" class="nav-link p-0">
                    physics
                  </a>
                
        </li>
        <li data-nav-id="/unity/skybox/" class="nav-item my-1">
                
                
                  <a href="/unity/skybox/" class="nav-link p-0">
                    skybox
                  </a>
                
        </li>
        <li data-nav-id="/unity/particle-system/" class="nav-item my-1">
                
                
                  <a href="/unity/particle-system/" class="nav-link p-0">
                    particle system
                  </a>
                
        </li>
        <li data-nav-id="/unity/shortcut-keys/" class="nav-item my-1">
                
                
                  <a href="/unity/shortcut-keys/" class="nav-link p-0">
                    shortcut keys
                  </a>
                
        </li>
        <li data-nav-id="/unity/qa/" class="nav-item my-1">
                
                
                  <a href="/unity/qa/" class="nav-link p-0">
                    Q&amp;A
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-2d-beginner/" class="nav-item my-1 parent haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-2d-beginner/"><h6>Unity 2D Beginner</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-2d-beginner/init-and-move/" class="nav-item my-1">
                
                
                  <a href="/unity-2d-beginner/init-and-move/" class="nav-link p-0">
                    Init &amp; Move
                  </a>
                
        </li>
        <li data-nav-id="/unity-2d-beginner/map/" class="nav-item my-1 active">
                
                
                  <a href="/unity-2d-beginner/map/" class="nav-link p-0">
                    Map
                  </a>
                
        </li>
        <li data-nav-id="/unity-2d-beginner/data/" class="nav-item my-1">
                
                
                  <a href="/unity-2d-beginner/data/" class="nav-link p-0">
                    Data
                  </a>
                
        </li>
        <li data-nav-id="/unity-2d-beginner/animate/" class="nav-item my-1">
                
                
                  <a href="/unity-2d-beginner/animate/" class="nav-link p-0">
                    Data
                  </a>
                
        </li>
        <li data-nav-id="/unity-2d-beginner/bullet/" class="nav-item my-1">
                
                
                  <a href="/unity-2d-beginner/bullet/" class="nav-link p-0">
                    Bullet
                  </a>
                
        </li>
        <li data-nav-id="/unity-2d-beginner/cinemachine/" class="nav-item my-1">
                
                
                  <a href="/unity-2d-beginner/cinemachine/" class="nav-link p-0">
                    Cinemachine
                  </a>
                
        </li>
        <li data-nav-id="/unity-2d-beginner/particle/" class="nav-item my-1">
                
                
                  <a href="/unity-2d-beginner/particle/" class="nav-link p-0">
                    Particle
                  </a>
                
        </li>
        <li data-nav-id="/unity-2d-beginner/ui/" class="nav-item my-1">
                
                
                  <a href="/unity-2d-beginner/ui/" class="nav-link p-0">
                    UI
                  </a>
                
        </li>
        <li data-nav-id="/unity-2d-beginner/npc/" class="nav-item my-1">
                
                
                  <a href="/unity-2d-beginner/npc/" class="nav-link p-0">
                    NPC
                  </a>
                
        </li>
        <li data-nav-id="/unity-2d-beginner/sound/" class="nav-item my-1">
                
                
                  <a href="/unity-2d-beginner/sound/" class="nav-link p-0">
                    Sound
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-2d-game-kit/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-2d-game-kit/"><h6>Unity 2D Game Kit</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-2d-game-kit/record/" class="nav-item my-1">
                
                
                  <a href="/unity-2d-game-kit/record/" class="nav-link p-0">
                    record
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-3d-beginner/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-3d-beginner/"><h6>Unity 3D Beginner</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-3d-beginner/init/" class="nav-item my-1">
                
                
                  <a href="/unity-3d-beginner/init/" class="nav-link p-0">
                    Init
                  </a>
                
        </li>
        <li data-nav-id="/unity-3d-beginner/level/" class="nav-item my-1">
                
                
                  <a href="/unity-3d-beginner/level/" class="nav-link p-0">
                    Level
                  </a>
                
        </li>
        <li data-nav-id="/unity-3d-beginner/nav/" class="nav-item my-1">
                
                
                  <a href="/unity-3d-beginner/nav/" class="nav-link p-0">
                    Nav
                  </a>
                
        </li>
        <li data-nav-id="/unity-3d-beginner/render-pipeline/" class="nav-item my-1">
                
                
                  <a href="/unity-3d-beginner/render-pipeline/" class="nav-link p-0">
                    Render Pipeline
                  </a>
                
        </li>
        <li data-nav-id="/unity-3d-beginner/postprocessing/" class="nav-item my-1">
                
                
                  <a href="/unity-3d-beginner/postprocessing/" class="nav-link p-0">
                    PostProcessing
                  </a>
                
        </li>
        <li data-nav-id="/unity-3d-beginner/ui/" class="nav-item my-1">
                
                
                  <a href="/unity-3d-beginner/ui/" class="nav-link p-0">
                    UI
                  </a>
                
        </li>
        <li data-nav-id="/unity-3d-beginner/enemy/" class="nav-item my-1">
                
                
                  <a href="/unity-3d-beginner/enemy/" class="nav-link p-0">
                    Enemy
                  </a>
                
        </li>
        <li data-nav-id="/unity-3d-beginner/sound/" class="nav-item my-1">
                
                
                  <a href="/unity-3d-beginner/sound/" class="nav-link p-0">
                    Sound
                  </a>
                
        </li>
        <li data-nav-id="/unity-3d-beginner/%E5%BB%BA%E6%A8%A1%E5%B7%A5%E5%85%B7/" class="nav-item my-1">
                
                
                  <a href="/unity-3d-beginner/%E5%BB%BA%E6%A8%A1%E5%B7%A5%E5%85%B7/" class="nav-link p-0">
                    建模工具
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-arpg/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-arpg/"><h6>Unity ARPG</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-arpg/init/" class="nav-item my-1">
                
                
                  <a href="/unity-arpg/init/" class="nav-link p-0">
                    Init
                  </a>
                
        </li>
        <li data-nav-id="/unity-arpg/role-state-machine/" class="nav-item my-1">
                
                
                  <a href="/unity-arpg/role-state-machine/" class="nav-link p-0">
                    Role State Machine
                  </a>
                
        </li>
        <li data-nav-id="/unity-arpg/api-piece/" class="nav-item my-1">
                
                
                  <a href="/unity-arpg/api-piece/" class="nav-link p-0">
                    API Piece
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-creativecore-animation/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-creativecore-animation/"><h6>Unity Creativecore Animation</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-creativecore-animation/door/" class="nav-item my-1">
                
                
                  <a href="/unity-creativecore-animation/door/" class="nav-link p-0">
                    Door
                  </a>
                
        </li>
        <li data-nav-id="/unity-creativecore-animation/init/" class="nav-item my-1">
                
                
                  <a href="/unity-creativecore-animation/init/" class="nav-link p-0">
                    Init
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-creativecore-lighting/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-creativecore-lighting/"><h6>Unity Creativecore Lighting</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-creativecore-lighting/init/" class="nav-item my-1">
                
                
                  <a href="/unity-creativecore-lighting/init/" class="nav-link p-0">
                    Init
                  </a>
                
        </li>
        <li data-nav-id="/unity-creativecore-lighting/outdoor/" class="nav-item my-1">
                
                
                  <a href="/unity-creativecore-lighting/outdoor/" class="nav-link p-0">
                    Outdoor
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-creativecore-shader/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-creativecore-shader/"><h6>Unity Creativecore Shader</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-creativecore-shader/init/" class="nav-item my-1">
                
                
                  <a href="/unity-creativecore-shader/init/" class="nav-link p-0">
                    Init
                  </a>
                
        </li>
        <li data-nav-id="/unity-creativecore-shader/glass/" class="nav-item my-1">
                
                
                  <a href="/unity-creativecore-shader/glass/" class="nav-link p-0">
                    Glass
                  </a>
                
        </li>
        <li data-nav-id="/unity-creativecore-shader/shader-graph/" class="nav-item my-1">
                
                
                  <a href="/unity-creativecore-shader/shader-graph/" class="nav-link p-0">
                    Shader-Graph
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-creator-kit-beginner-code/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-creator-kit-beginner-code/"><h6>Unity Creator Kit Beginner Code</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-creator-kit-beginner-code/record/" class="nav-item my-1">
                
                
                  <a href="/unity-creator-kit-beginner-code/record/" class="nav-link p-0">
                    record
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-creator-kit-fps/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-creator-kit-fps/"><h6>Unity Creator Kit FPS</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-creator-kit-fps/record/" class="nav-item my-1">
                
                
                  <a href="/unity-creator-kit-fps/record/" class="nav-link p-0">
                    record
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-mythirdperson/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-mythirdperson/"><h6>Unity My Third Person</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-mythirdperson/init/" class="nav-item my-1">
                
                
                  <a href="/unity-mythirdperson/init/" class="nav-link p-0">
                    Init
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-playground/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-playground/"><h6>Unity Playground</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-playground/record/" class="nav-item my-1">
                
                
                  <a href="/unity-playground/record/" class="nav-link p-0">
                    record
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-ui/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-ui/"><h6>Unity UI</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-ui/init/" class="nav-item my-1">
                
                
                  <a href="/unity-ui/init/" class="nav-link p-0">
                    record
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-vfx/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-vfx/"><h6>Unity VFX</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-vfx/init/" class="nav-item my-1">
                
                
                  <a href="/unity-vfx/init/" class="nav-link p-0">
                    record
                  </a>
                
        </li>
        <li data-nav-id="/unity-vfx/bullet/" class="nav-item my-1">
                
                
                  <a href="/unity-vfx/bullet/" class="nav-link p-0">
                    bullet
                  </a>
                
        </li>
        <li data-nav-id="/unity-vfx/rain/" class="nav-item my-1">
                
                
                  <a href="/unity-vfx/rain/" class="nav-link p-0">
                    rain
                  </a>
                
        </li>
        <li data-nav-id="/unity-vfx/rock-rain/" class="nav-item my-1">
                
                
                  <a href="/unity-vfx/rock-rain/" class="nav-link p-0">
                    Rock Rain
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/vue/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/vue/"><h6>Vue</h6></a>
        
    </li>
    <li data-nav-id="/web/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/web/"><h6>Web</h6></a>
        
    </li>
        </ul>
    </div>
</nav>


</div>
                <div class="docs-toc large order-lg-2 order-md-0 order-xs-1 col-12 col-lg-2 col-xl-2 position-sticky border-left"><div class="docs-toc">
	<nav id="TableOfContents">
  <ul>
    <li><a href="#tilemap">Tilemap</a></li>
    <li><a href="#创建">创建</a></li>
    <li><a href="#更多">更多</a></li>
    <li><a href="#谁遮盖谁">谁遮盖谁</a></li>
    <li><a href="#物体碰撞">物体碰撞</a>
      <ul>
        <li><a href="#地图碰撞">地图碰撞</a></li>
      </ul>
    </li>
  </ul>
</nav>
</div>
</div>
                <div class="main col-12 order-1 col-md-9 col-lg-10 col-xl-8 py-3">
                

<div class="d-flex flex-column">
    <h1 class="js-title">Map</h1>
    <div class="d-flex align-items-center">
        
    </div>
</div>

<hr>


<p>2024.08.24</p>
<h2 id="tilemap">Tilemap</h2>
<p>Tilemap(瓦片地图) 是 2D 游戏中，用来构建世界的工具</p>
<ul>
<li>Sprite(精灵)：纹理的容器。大型纹理图集可以转换为精灵图集(Sprite Sheet)</li>
<li>Tile(瓦片)：包含一个精灵，以及二个属性，颜色和碰撞体类型。使用瓦片就像在画布上画画一样，画画时可以设置一些颜色和属性</li>
<li>Tile Palette(瓦片调色板)：当你在画布(Canvas)上画画时，会需要一个位置来保存绘画的结果。类似地，调色板(Palette)的功能就是保存瓦片，将它们绘制到网格上</li>
<li>Brush(笔刷)：用于将画好的东西绘制到画布上。使用 Tilemap 时，可以在多个笔刷中任意选择，绘制出线条、方块等各种形状</li>
<li>Tilemap（瓦片地图）：类似 Photoshop 中的图层，我们可以在 Tilemap 上画上 Tile</li>
<li>Grid(网格)：用于控制网格属性的组件。Tilemap 是 Grid 的子对象。Grid 类似于 UI Canvas(UI 画布)。</li>
<li>Tilemap Renderer(瓦片地图渲染器)：是 Tilemap 游戏对象的一部分,用于控制 Tile 在 Tilemap 上的渲染，控制诸如排序、材质和遮罩等。</li>
</ul>
<h2 id="创建">创建</h2>
<p>Hierarchy -&gt; Scene -&gt; 右键 -&gt; GameObject -&gt; 2D Object -&gt; Tilemap -&gt; 5种</p>
<ol>
<li>Rectangular 矩形</li>
<li>Hexagonal - Pointed-Top 六边形点朝上</li>
<li>Hexagonal - Flat-Top 六边形边朝上</li>
<li>Isometric</li>
<li>Isometric Z as Y</li>
</ol>
<p>择一选择后，会在 Hierarchy 创建 Grid 对象，对象的包括 Tilemap 子对象。点击 Grid 或者 Tilemap 在 Scene 窗口的右下角点击 Open Tile Palette</p>
<ol>
<li>点击 No Valid Palette -&gt; Create New Palette 打开窗口</li>
<li>该窗口的 Name 自定义输入名字，如 GamePalette 。 Grid 选择上面创建的 Tilemap 类型 。确定</li>
<li>在保存对话中创建一个 Assets 目录下的 Tiles 文件夹并选择</li>
<li>在 Project 窗口中点击刚刚创建的 Tiles 文件夹，右键 -&gt; Create -&gt; 2D -&gt; Tiles 选择 Rule Tile (其它 Tile 这里不管)，命名为 BrickTile</li>
<li>选中后在 Inspector 窗口中的 Default Sprite 设为 Tile (首页的下载的) 资源</li>
<li>将 BrickTile 拖拽到 Tile Palette 中</li>
<li>选择 Tile Palette 中的 BrickTile 瓦片，就可以在 Scene 中绘制</li>
</ol>
<p>但此时绘制出来后有问题(每片不相连，中间有空白)。点击 Assets/Art/Sprites/Tile (首页的下载的) 的 Inspector 窗口中的 Pixels Per Unit 设为 64 。因为 Tile 的尺寸是 64 * 64 的</p>
<p>另外还存在上一节创建的 Ruby 对象会在瓦片地图之下的问题。点击 Hierarchy -&gt; Grid -&gt; Tilemap 的 Inspector 窗口中的 Tilemap Renderer -&gt; Additional Settings -&gt; Order in Layer 设置为 -10</p>
<p>以上是最基本的瓦片地图绘制。进阶则会是使用 <code>9切片精灵</code> 。可以在项目中找到如 Assets/Art/Sprites/Environmnent/FloorBricksToGrassSquare.png 资源。图片大小为 192 *192 ，组成方式是 64 * 64 的 3 * 3 的九宫格。使用这种精灵图的方法如下</p>
<ol>
<li>Inspector 窗口中的 Pixels Per Unit 设为 64 ， Sprite Mode 改为 Multiple ，点击 Sprite Editor</li>
<li>在 Sprite Editor 中的 Slice 选择 Gride By Ceil Size ， Pixel Size 设为 64 64 ，点击 Slice ，点击 Apply</li>
<li>将 Assets/Art/Sprites/Environmnent/FloorBricksToGrassSquare.png 拖拽到 Tile Palette 中，在弹出的对话框中选择Assets/Tiles 文件夹后（会在这个文件下创建 FloorBricksToGrassSquare_0~8.asset 共9个文件），便能选择切片后的精灵进行绘制</li>
</ol>
<p>但这也只是 <code>9切片精灵</code> 的基本用法，绘制地图还是需要逐个点击，切换绘制。更高级的就是使用 Rule Tile 做瓦片</p>
<ol>
<li>复制上面创建的 BrickTile 并改名 BrickTile2，或者新建一个 Rule Tile</li>
<li>Default Sprite 设为 Tile (首页的下载的) 资源（复用上面即可）</li>
<li>在 Tilling Rules 中点 + 号，一共添加 9 个项，分别 Select 已9切片的精灵图（复用上面的 FloorBricksToGrassSquare.png 即可），并根据每一片的位置设置相邻的瓦片， X 表示没有，箭头表示有 。如左上的一片不会存在上方和左方的拼接，所以点成 X ，存在右方和下方，所以点成箭头</li>
</ol>
<p><img src="./set9sprite.png" alt="alt set9sprite"></p>
<ol start="4">
<li>将设置好的 RuleTile 拖拽到 Tile Palette 中，就可以使用了</li>
</ol>
<p>此时用这个瓦片绘制连续的地图时，就会自动替换成其它方向的切片。虽然提高了绘制的效率，但制作过程又繁琐了。下面使用 Rule Override Tile 来解决</p>
<ol>
<li>BrickTile 目录下右键 -&gt; Create -&gt; 2D -&gt; Tiles -&gt; Rule Override Tile ，命名为 BrickOverrideTile</li>
<li>将上面做好的 BrickTile2 拖拽到 BrickOverrideTile 的 Inspector 中的 Tile 属性中。此时 Original Sprite 显示 BrickTile2 的设置</li>
<li>将另一个切好片的素材依次拖到 Override Sprite 中，即复用 BrickTile2 规则，生成了新的瓦片</li>
</ol>
<p>这种方法的优点就是节约了同类 <code>9切片精灵</code> 的瓦片制作。另外还有一种 Advanced Rule Override Tile ，区别在于可以调整9片中的启用和禁用</p>
<h2 id="更多">更多</h2>
<ul>
<li>编程瓦片 Scriptable Tile</li>
</ul>
<p>用代码创建自己的 Tile 类，实现瓦片的绘制规则。或者创建自定义瓦片编辑器。</p>
<p>创建一个继承自 TileBase（或 TileBase 的任何有用子类，如 Tile）的新类。重写新的 Tile 类所需的所有方法。</p>
<ul>
<li>编程画笔 Scriptable Brush</li>
</ul>
<p>创建自己的 Brush 类，设计适合自己游戏的网格画笔。</p>
<p>创建一个继承自 GridBrushBase（或 GridBrushBase 的任何有用子类，如 GridBrush）的新类。重写新的 Brush 类所需的所有方法。</p>
<p>创建可编程画笔后，画笔将列在 Palette 窗口的 Brushes 下拉选单中。默认情况下，可编程画笔脚本的实例将经过实例化并存储在项目的 Library 文件夹中。对画笔属性的任何修改都会存储在该实例中。如果希望该画笔有多个具备不同属性的副本，可在项目中将画笔实例化为资源。这些画笔资源将在 Brush 下拉选单中单独列出。</p>
<ul>
<li>2D Tilemap Extras （2D 瓦片地图扩展）</li>
</ul>
<p>2D 瓦片地图扩展&ndash;官方文档 <a href="https://docs.unity3d.com/Packages/com.unity.2d.tilemap.extras@2.2/manual/index.html">https://docs.unity3d.com/Packages/com.unity.2d.tilemap.extras@2.2/manual/index.html</a></p>
<p><strong>Animated Tile 动画瓦片</strong></p>
<p>动画瓦片在游戏运行时，按顺序显示 Sprite 列表以创建逐帧动画</p>
<h2 id="谁遮盖谁">谁遮盖谁</h2>
<ul>
<li>Order in Layer 大的会遮盖小的</li>
<li>Order in Layer 相同时会出现随机的情况（不同物体不一样，不是相同物体时遮盖有时被遮盖）。解决这个的方法是 Y 轴上值越小越靠前，设置如下</li>
</ul>
<p>Edit -&gt; Project Settings -&gt; Graphics -&gt; Camera -&gt; Transparency Sort Mode = Custom Axis -&gt; Transparency Sort Axis x = 0 / y = 1 / z = 0</p>
<p>但是会存在一些精灵（图）是伪立体的，其原点在中心上，当 y 小于这个值时虽然能遮住，但效果不好。解决这个问题的方法是设置 Sprite 的 pivot 属性 Bottom 或者点击 Sprite Editor 进入编辑窗口，拖拽蓝色点，即自定义 Pivot 坐标。并且把 Sprite Renderer 的 Sprite Sort Point 改为 Pivot</p>
<h2 id="物体碰撞">物体碰撞</h2>
<ol>
<li>给操作的对象（Ruby）添加刚体和碰撞体，并将碰撞体的范围调整到合适大小</li>
</ol>
<ul>
<li>刚体可暂时取消 Gravity Scale 重力</li>
</ul>
<ol start="2">
<li>创建 Assets/Prefabs 文件夹</li>
<li>从 Assets/Art/Sprites/Environment/MetalCube 创建一个对象，添加碰撞体（对于永远静止，不可互动的物体就不用添加刚体，添加碰撞体仅为了防止穿过），编辑合适大小，并将这个对象做成预制体</li>
</ol>
<p>此时 Ruby 和 MetalCube 会存在碰撞检测，但操作 Ruby 靠近 MetalCube 时， Ruby 会出现抖动和旋转的问题。解决方法如下</p>
<ul>
<li>解决旋转：选择 Ruby ，在 Inspector 中的 Rigidbody 2D 的 Constraints 属性中，勾选 Freeze Rotation Z</li>
<li>解决抖动：造成的原因是之前操控移动的代码是仅操作 Transform 的属性，就造成了移动进了 MetalCube 内部，但又被刚体碰撞检测弹出来，反复这个过程。</li>
</ul>
<div class="highlight"><pre tabindex="0" style="color:#272822;background-color:#fafafa;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-cs" data-lang="cs"><span style="display:flex;"><span><span style="color:#75715e">// 将速度暴露出来，使其可调</span>
</span></span><span style="display:flex;"><span><span style="color:#00a8c8">public</span> <span style="color:#00a8c8">float</span> <span style="color:#111">speed</span> <span style="color:#111">=</span> <span style="color:#ae81ff">1.0f</span><span style="color:#111">;</span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">// 获得刚体对象</span>
</span></span><span style="display:flex;"><span><span style="color:#111">Rigidbody2D</span> <span style="color:#111">rb2D</span><span style="color:#111">;</span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">// 用户操作</span>
</span></span><span style="display:flex;"><span><span style="color:#00a8c8">float</span> <span style="color:#111">horizontal</span><span style="color:#111">;</span>
</span></span><span style="display:flex;"><span><span style="color:#00a8c8">float</span> <span style="color:#111">vertical</span><span style="color:#111">;</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">// Start is called before the first frame update</span>
</span></span><span style="display:flex;"><span><span style="color:#00a8c8">void</span> <span style="color:#111">Start</span><span style="color:#111">()</span>
</span></span><span style="display:flex;"><span><span style="color:#111">{</span>
</span></span><span style="display:flex;"><span>    <span style="color:#111">rb2D</span> <span style="color:#111">=</span> <span style="color:#111">GetComponent</span><span style="color:#111">&lt;</span><span style="color:#111">Rigidbody2D</span><span style="color:#111">&gt;();</span>
</span></span><span style="display:flex;"><span><span style="color:#111">}</span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">// 每帧调用一次 Update</span>
</span></span><span style="display:flex;"><span><span style="color:#00a8c8">void</span> <span style="color:#111">Update</span><span style="color:#111">()</span>
</span></span><span style="display:flex;"><span><span style="color:#111">{</span>
</span></span><span style="display:flex;"><span>    <span style="color:#111">horizontal</span> <span style="color:#111">=</span> <span style="color:#111">Input</span><span style="color:#111">.</span><span style="color:#111">GetAxis</span><span style="color:#111">(</span><span style="color:#d88200">&#34;Horizontal&#34;</span><span style="color:#111">);</span>
</span></span><span style="display:flex;"><span>    <span style="color:#111">vertical</span> <span style="color:#111">=</span> <span style="color:#111">Input</span><span style="color:#111">.</span><span style="color:#111">GetAxis</span><span style="color:#111">(</span><span style="color:#d88200">&#34;Vertical&#34;</span><span style="color:#111">);</span>
</span></span><span style="display:flex;"><span>    <span style="color:#75715e">/*Vector2 position = transform.position;
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">    position.x = position.x + speed * horizontal * Time.deltaTime;
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">    position.y = position.y + speed * vertical * Time.deltaTime;
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">    transform.position = position;*/</span>
</span></span><span style="display:flex;"><span><span style="color:#111">}</span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">// 为了使物理计算保持稳定，需要定期进行更新的用这个方法，默认0.02秒调用一次</span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">// 不要从这个方法中读取输入，因为不会持续运行</span>
</span></span><span style="display:flex;"><span><span style="color:#00a8c8">void</span> <span style="color:#111">FixedUpdate</span><span style="color:#111">()</span>
</span></span><span style="display:flex;"><span><span style="color:#111">{</span>
</span></span><span style="display:flex;"><span>    <span style="color:#111">Vector2</span> <span style="color:#111">position</span> <span style="color:#111">=</span> <span style="color:#111">transform</span><span style="color:#111">.</span><span style="color:#111">position</span><span style="color:#111">;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#111">position</span><span style="color:#111">.</span><span style="color:#111">x</span> <span style="color:#111">=</span> <span style="color:#111">position</span><span style="color:#111">.</span><span style="color:#111">x</span> <span style="color:#111">+</span> <span style="color:#111">speed</span> <span style="color:#111">*</span> <span style="color:#111">horizontal</span> <span style="color:#111">*</span> <span style="color:#111">Time</span><span style="color:#111">.</span><span style="color:#111">deltaTime</span><span style="color:#111">;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#111">position</span><span style="color:#111">.</span><span style="color:#111">y</span> <span style="color:#111">=</span> <span style="color:#111">position</span><span style="color:#111">.</span><span style="color:#111">y</span> <span style="color:#111">+</span> <span style="color:#111">speed</span> <span style="color:#111">*</span> <span style="color:#111">vertical</span> <span style="color:#111">*</span> <span style="color:#111">Time</span><span style="color:#111">.</span><span style="color:#111">deltaTime</span><span style="color:#111">;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#111">rb2D</span><span style="color:#111">.</span><span style="color:#111">transform</span><span style="color:#111">.</span><span style="color:#111">position</span> <span style="color:#111">=</span> <span style="color:#111">position</span><span style="color:#111">;</span>
</span></span><span style="display:flex;"><span><span style="color:#111">}</span>
</span></span></code></pre></div><h3 id="地图碰撞">地图碰撞</h3>
<p>给 Hierarchy/Grid/Tilemap 添加一个 Tilemap Collider 2D 。此时 Ruby 就不能再进入绘制的地图了，下面便是设置哪些可以“踩”上去，哪些不能</p>
<ul>
<li>给 Assets/Tiles 下的 Tile 资源把 Default Collider 改为 None</li>
<li>对于 <code>9切片精灵</code> 做的 RuleTile 就需要逐个的将 Collider 设置为 None 或者保留为 Sprite</li>
</ul>
<p>另外还有其它问题，多个地图碰撞体相邻时，彼此是独立的，当数量多时会有性能损耗，并且中间会存在“缝隙”造成Bug。用 Composite Collider 2D 解决</p>
<ol>
<li>给 Hierarchy/Grid/Tilemap 添加一个 Composite Collider 2D 组件</li>
<li>将 Tilemap Collider 2D 组件的 Used By Composite 勾上</li>
<li>将 Rigidbody 2D 的 Body Type 设置为 Static</li>
</ol>


    


                    
                    <div class="row"></div> 

                </div>

            </div> 

        </div> 
<script src="/lib/jquery.min.js"></script> 
<script src="/lib/popper.min.js"></script> 

<script src="/js/bootstrap.min.js"></script> 


<script type="text/javascript" src="/plugins/lunr.min.js"></script>
<script type="text/javascript" src="/plugins/auto-complete.js"></script>
<link href="/plugins/auto-complete.css" rel="stylesheet">
<script type="text/javascript">
  
      var baseurl = "\/";
  
</script>
<script type="text/javascript" src="/plugins/search.js"></script>

<script type="text/javascript" src="/plugins/favorites.js"></script>


<script type="text/javascript" src="/plugins/clipboard.js"></script>
<script>
  new ClipboardJS('.btn');
</script>
</body>
</html>
